<template>
	<view class="">
		<scroll-view scroll-x class="bg-white nav fixed">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==1?'text-blue cur':''" @tap="tabSelect" :data-id="1">
					菜单权限
				</view>
				<view class="cu-item flex-sub" :class="index==2?'text-blue cur':''" @tap="tabSelect" :data-id="2">
					数据权限
				</view>
			</view>
		</scroll-view>
		<block class="margin-top-xs" v-if="index==1">
			<view class="content" style="margin-top: 100rpx;">
				<ly-tree ref="tree"
				    :tree-data="list"
					:props="props"
					check-on-click-node
					default-expand-all 
					node-key="menu_code"
					show-checkbox
					@check="handleCheck"
					/> 
			</view>
			<view style="height:150rpx;"></view>
		</block>
		<block class="margin-top-xs" v-if="index==2">
			<view style="margin-top: 100rpx;">
				<checkbox-group class="block" @change="checkboxChange(info)" v-if="list.length>0" v-for="(info,index) in list" :key="index">
					<view class="cu-form-group">
						<view class="title">
							<checkbox class="blue" :class="info.flag?'checked':''" :checked="info.flag" :value="info.residential_quarters_guid" style="transform:scale(0.8)"></checkbox>
							<text class="margin-left-xs">{{info.residential_quarters_name}}</text></view>
					</view>
				</checkbox-group>
			</view>
			<view style="height:150rpx;"></view>
		</block>
		<button class="cu-btn block bg-blue lg foot" @tap="getcheckguid">确定</button>
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		components: {
			LyTree
		},
		data() {
			return {
				props: function() {
					return {
						// 这里的label就可以使用函数进行自定义的渲染了
						label(data, node) {
							return '节点' + node.data.menu_name;
						},
						label: 'menu_name', // 指把数据中的‘personName’当做label也就是节点名称
						//children: 'childs' // 指把数据中的‘childs’当做children当做子节点数据
					}
				},
				index:1,
				sjhm:'',
				list:[],
				menulist:[],
				checkvalue:'',
				checkguid:'',
				guidlist:[],
				type:""
			};
		},
		onLoad(options) {
			this.sjhm=options.phone;
			this.type=options.type;
		},
		onShow() {
			this.getInfo();
			if(this.sjhm){
				this.getinitguid();
				this.getinitmenu();
			}
		},
		methods: {
			tabSelect(e) {
				this.index = e.currentTarget.dataset.id;
				this.list=[];
				this.getInfo();
			},
			getinitmenu(){
				let that=this;
				that.http.tokenreq({
					url:"subaccount/v1/operatormenu",
					data:{"phone_number":this.sjhm}
				}).then((res) => {
					let e=res.data;
					console.log("用户菜单权限"+JSON.stringify(e));
					if(e.code==0 && e.success){
						this.menulist = e.data;
					}
				})
			},
			getinitguid(){
				let that=this;
				that.http.tokenreq({
					url:"subaccount/v1/villageauthority",
					data:{"phone_number":this.sjhm}
				}).then((res) => {
					let e=res.data;
					console.log("用户数据权限"+JSON.stringify(e));
					if(e.code==0 && e.success){
						this.guidlist = e.rows;
					}
				})
			},
			getInfo(){
				let that=this;
				let url="";
				if(this.index==1){
					url="subaccount/v1/operatormenu";
				}else{
					url="subaccount/v1/village";
				}
				that.http.tokenreq({
					url:url,
				}).then((res) => {
					let e=res.data;
					//console.log("e="+JSON.stringify(e));
					if(e.code==0 && e.success && this.index==1){
						this.list = e.data;
					}
					if(e.code==0 && e.success && this.index==2){
						let list = e.rows;
						list.forEach(item => {
							item.flag = false;
						});
						this.list=list;
					}
				})
			},
			checkboxChange (item) {
				var checkguid=this.checkguid;
				item.flag = !item.flag;
				if (item.flag) {
					checkguid+=item.residential_quarters_guid+",";
				}else{
					checkguid=checkguid.replace(item.residential_quarters_guid+",","");
				}
				this.checkguid=checkguid;
			},
			handleCheck(obj) {
				let checkvalue=obj.checkedKeys.toString();
				this.checkvalue=checkvalue;
				console.log('checkvalue', JSON.stringify(checkvalue));
			},
			getcheckguid(){
				if(this.checkvalue=='' || this.checkvalue==null){
					uni.showToast({
						icon: 'none',
					    title: '请选择菜单权限'
					});
					return;
				}
				if(this.checkguid=='' || this.checkguid==null){
					uni.showToast({
						icon: 'none',
					    title: '请选择数据权限'
					});
					return;
				}
				if(this.type==1){
					uni.navigateTo({
						url:'/pages/community/commaccount/addaccount?value='+this.checkvalue+"&sjhm="+this.sjhm+"&checkguid="+this.checkguid
					});
				}else{
					uni.navigateTo({
						url:'/pages/community/commaccount/commaccount?value='+this.checkvalue+"&checkguid="+this.checkguid
					});
				}
			}
		}
	}
</script>

<style>
	.uni_header{
		height:120rpx;
	}
	.foot{
		position: fixed;
		bottom:0;
		left: 0;
		width:100%;
		color:#FFFFFF;
		z-index:99999999;
	}
</style>
